<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				
			}
			body{
				background-color: pink;
			}
			#nav{
				float: left;
				width: 1000px;
				height: 63px;
				background:url(image/doubleOne.png) no-repeat right center white;
				margin-top: 100px;
				border-radius: 5px;
				position: relative;
				margin-left: 200px
				
			}
			#nav ul{
				position: relative;
			}
			 #nav ul li{
				 width: 88px;
				float: left;
				height: 63px;
				margin-right: 15px;
				text-align: center;
				line-height: 70px;
				cursor: pointer;
			}
			#ps{
				width: 88px;
				height: 63px;
				background: url(image/tMall.png)no-repeat;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<nav id="nav">
			<div id="ps"></div>
			<ul id="ul">
			<li>双11狂欢</li>
			<li>服装会场</li>
			<li>数码家电</li>
			<li>家具建材</li>
			<li>母婴童装</li>
			<li>手机会场</li>
			<li>美妆会场</li>
			<li>进口会场</li>
			<li>飞猪旅行</li>	
			</ul>
		</nav>
		<script>
			window.onload = function(){
				var nav = $('nav');
				var ps = nav.children[0];
				var ul = nav.children[1];
				var alllis = ul.children;
			var beginx = 0;
			var end
				for(var i=0;i<alllis.length;i++){
					var li = alllis[i];
					
					
				li.onmouseover = function(){
					 end = this.offsetLeft;
				};
				li.onmouseover = function(){
					beginx = this.offsetLeft;
				};
				li.onmouseout = function(){
					 end = beginx ;
				};
			
				}
				
				
				//缓动动画
				
			
			setInterval(function () {
			    end = beginx + (end - beginx) * 0.4;
			    ps.style.left = end + "px";
			}, 10);	
				
				
				
				
				
				
				
				
				
				
				
				function $(id) {
				    return typeof id === "string" ? document.getElementById(id) : null;
				}
			}
		</script>
	</body>
</html>
